<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    router
    @select="handleSelect"
  >
    <!-- <img src="../assets/kungongLog.png" alt="" style="height: 30px" /> -->
    <el-menu-item index="/">Materials Machine-Learning</el-menu-item>

    <div class="flex-grow" />
    <el-menu-item index="/">首页</el-menu-item>
    <el-menu-item index="/DataManagement">数据管理</el-menu-item>
    <el-menu-item index="/FeaturesBuild">特征构建</el-menu-item>
    <el-menu-item index="/ModelBuild">模型构建</el-menu-item>
    <el-menu-item index="/ModelManagement">模型管理</el-menu-item>
    <el-menu-item index="/WorkFlow">工作流</el-menu-item>
  </el-menu>
</template>

<script setup>
import { ref } from "vue";

const activeIndex = ref("/");
const handleSelect = () => {
  // console.log(key, keyPath)
};
</script>

<style>
.flex-grow {
  flex-grow: 1;
}
</style>
